<template>
	<view>
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<view class="title">问卷标题</view>
			<view class="xian"></view>
			<view class="main">
				<view class="main-item" v-for="(item,index) in list" :key="index">
					<view class="item-title">{{index+1}}.{{item.title}}</view>
					<view class="item-content flex" v-for="(item,index) in item.content" :key="index">
						<span></span>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">复制问卷</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: "",
				list: [{
					title: '题目一',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目二',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目三',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目一',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目二',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目三',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目一',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目二',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}, {
					title: '题目三',
					content: [{
						title: '选项一'
					}, {
						title: '选项二'
					}],
				}],
			};
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					console.log(res)
					that.height = res.windowHeight * 0.9

				}
			})

		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '新的标题'
			});
		}
	}
</script>

<style lang="scss">
	.title {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		color: #209FFB;
	}

	.xian {
		width: 690rpx;
		height: 1rpx;
		margin: 10rpx auto 30rpx;
		border: 1rpx dashed #DFDFDF;

	}

	.main-item {
		width: 690rpx;
		margin: 20rpx auto;
		color: #333;

		.item-title {
			padding: 10rpx 0;
			font-weight: bold;
			font-size: 32rpx;

		}

		.item-content {
			font-size: 30rpx;
			height: 60rpx;
			line-height: 60rpx;

			span {
				width: 25rpx;
				height: 25rpx;
				display: inline-block;
				border: 1rpx solid #DFDFDF;
				margin: 0 10rpx;
			}
		}
	}

	.footer {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		background: #209FFB;
		border-radius: 20rpx;
		margin: 30rpx auto;
	}
</style>
